<template>
	<div class="contents">
		<Header></Header>
		<nav class="nav">
			<van-row>
				<van-col span="5">
					<router-link tag="span" to="space">空间</router-link>
				</van-col>
				<van-col span="5">
					<router-link tag="span" to="style">风格</router-link>
				</van-col>
				<van-col span="4">
					<router-link tag="span" to="hardclo">硬装</router-link>
				</van-col>
				<van-col span="5">
					<router-link tag="span" to="softloa">软装</router-link>
				</van-col>
				<van-col span="5">
					<router-link tag="span" to="hottest">最热</router-link>
				</van-col>
			</van-row>
		</nav>
		<router-view></router-view>
	</div>
</template>

<script>
import { Row, Col } from 'vant'
import Header from './Header'
import Vue from 'vue'

Vue.use(Row).use(Col)
export default {
	data () {
		return {}
	},
	components: {
		Header
	}
}
</script>

<style lang="scss" scoped="scoped">
@import '@/lib/reset.scss';
.nav{
	font-size: 0.12rem;
	text-align: center;
	height:0.5rem;
	.router-link-exact-active.router-link-active{
		color: #435b99!important;
		background: #eee;
	}
	span{
		display: inline-block;
		padding:0.03rem 0.13rem;
		margin-top:0.12rem;
		border:1px solid #ccc;
		border-radius: 0.04rem;
	}
	
}
</style>
